<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>憨批的小乌龟</title>
	</head>
	<style>
		* {
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		}
		body {
		    background: #000;
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		}
		.turtle {
		    width: 1em;
		    height: 0.75em;
		    background: #1abc9c;
		    font-size: 150px;
		    margin: 1em auto;
		    border-radius: 0.9em 0.9em 0.2em 0.2em;
		    border-bottom: 0.15em solid #16a085;
		    position: relative;
		    -webkit-transform-style: preserve-3d;
		    transform-style: preserve-3d;
		    -webkit-animation: go 5s infinite;
		    animation: go 5s infinite;
		}
		.head,
		.tail,
		.foot {
		    position: absolute;
		    -webkit-transform-style: preserve-3d;
		    transform-style: preserve-3d;
		}
		.head {
		    /*transform: translate(x,y);*/
		    
		    width: 0.25em;
		    height: 0.25em;
		    background: #16a085;
		    border-radius: 0.1em 0.05em 0.1em 0;
		    -webkit-transform: translateZ(-1em) translate(0.7em, 0.35em);
		    transform: translateZ(-1em) translate(0.7em, 0.35em);
		    -webkit-animation: look-out 5s infinite;
		    animation: look-out 5s infinite;
		}
		.tail {
		    width: 0.15em;
		    height: 0.15em;
		    background: #16a085;
		    border-radius: 0.2em 0 0 0;
		    -webkit-transform: translateZ(-1em) translate(0, 0.45em);
		    transform: translateZ(-1em) translate(0, 0.45em);
		    -webkit-animation: tail-out 5s infinite;
		    animation: tail-out 5s infinite;
		}
		.foot {
		    width: 0.1em;
		    height: 0.15em;
		    background: #138a72;
		    border-radius: 0.15em 0.15em 0.15em 0;
		    top: 0.65em;
		    -webkit-animation: feet-out 5s infinite;
		    animation: feet-out 5s infinite;
		}
		.front {
		    left: 0.7em;
		}
		.back {
		    left: 0.2em;
		}
		@-webkit-keyframes tail-out {
		    0% {
		        -webkit-transform: translateZ(-1em) translate(0, 0.45em);
		        transform: translateZ(-1em) translate(0, 0.45em);
		    }
		    10% {
		        -webkit-transform: translateZ(-1em) translate(-0.15em, 0.45em);
		        transform: translateZ(-1em) translate(-0.15em, 0.45em);
		    }
		    30% {
		        -webkit-transform: translateZ(-1em) translate(0, 0.45em);
		        transform: translateZ(-1em) translate(0, 0.45em);
		    }
		    50% {
		        -webkit-transform: translateZ(-1em) translate(-0.15em, 0.45em);
		        transform: translateZ(-1em) translate(-0.15em, 0.45em);
		    }
		}
		@keyframes tail-out {
		    0% {
		        -webkit-transform: translateZ(-1em) translate(0, 0.45em);
		        transform: translateZ(-1em) translate(0, 0.45em);
		    }
		    10% {
		        -webkit-transform: translateZ(-1em) translate(-0.15em, 0.45em);
		        transform: translateZ(-1em) translate(-0.15em, 0.45em);
		    }
		    30% {
		        -webkit-transform: translateZ(-1em) translate(0, 0.45em);
		        transform: translateZ(-1em) translate(0, 0.45em);
		    }
		    50% {
		        -webkit-transform: translateZ(-1em) translate(-0.15em, 0.45em);
		        transform: translateZ(-1em) translate(-0.15em, 0.45em);
		    }
		}
		@-webkit-keyframes feet-out {
		    10%, 50% {
		        -webkit-transform: rotate(0);
		        transform: rotate(0);
		    }
		    0%,
		    30%,
		    100% {
		        -webkit-transform: rotate(-70deg);
		        transform: rotate(-70deg);
		    }
		}
		@keyframes feet-out {
		    10%, 50% {
		        -webkit-transform: rotate(0);
		        transform: rotate(0);
		    }
		    0%,
		    30%,
		    100% {
		        -webkit-transform: rotate(-70deg);
		        transform: rotate(-70deg);
		    }
		}
		@-webkit-keyframes look-out {
		    0%, 30% {
		        -webkit-transform: translateZ(-1em) translate(0.7em, 0.35em);
		        transform: translateZ(-1em) translate(0.7em, 0.35em);
		    }
		    10%,
		    50% {
		        -webkit-transform: translateZ(-1em) translate(1em, 0.35em);
		        transform: translateZ(-1em) translate(1em, 0.35em);
		    }
		}
		@keyframes look-out {
		    0%, 30% {
		        -webkit-transform: translateZ(-1em) translate(0.7em, 0.35em);
		        transform: translateZ(-1em) translate(0.7em, 0.35em);
		    }
		    10%,
		    50% {
		        -webkit-transform: translateZ(-1em) translate(1em, 0.35em);
		        transform: translateZ(-1em) translate(1em, 0.35em);
		    }
		}
		@-webkit-keyframes go {
		    30% {
		        -webkit-transform: translateX(0.5em);
		        transform: translateX(0.5em);
		    }
		    50% {
		        -webkit-transform: translateX(1em);
		        transform: translateX(1em);
		    }
		}
		@keyframes go {
		    30% {
		        -webkit-transform: translateX(0.5em);
		        transform: translateX(0.5em);
		    }
		    50% {
		        -webkit-transform: translateX(1em);
		        transform: translateX(1em);
		    }
		}
		
	</style>
	<body>
		<div class="turtle">
		    <div class="head"></div>
		    <div class="tail"></div>
		    <div class="foot front"></div>
		    <div class="foot back"></div>
		</div>
		
	</body>
</html>
